<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>潮汕明珠 - 汕头 - 历史沿革</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引用自定义样式 -->
    <link rel="stylesheet" href="style.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#D93A3E',
                        secondary: '#F2A359',
                        accent: '#3D8B37',
                        neutral: '#F5F5F5',
                        dark: '#2C3E50',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Noto Serif SC', 'Georgia', 'serif'],
                    },
                }
            }
        }
    </script>
</head>

<body class="bg-neutral font-sans text-dark scroll-smooth">
    <!-- 导航菜单 -->
    <header class="header shadow-md" style="background-color: #3182ce;">
        <div class="container mx-auto flex items-center justify-between py-2 px-4">
            <div class="flex items-center gap-4">
                <div class="logo">
                    <img src="image/logo2.jpg" width="60" height="60" class="rounded-lg shadow" alt="汕头logo">
                </div>
                <span class="text-white text-2xl font-bold tracking-wide drop-shadow">潮汕明珠 · 汕头</span>
            </div>
            <nav class="nav hidden md:flex gap-4 items-center">
                <a href="index.html" class="font-bold px-4 py-2 rounded shadow hover:bg-yellow-400 transition"
                    style="background-color: #3182ce; color: #fff;">首 页</a>
                <div class="dropdown relative">
                    <a href="index.html"
                        class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">家乡介绍 <i
                            class="fa fa-angle-down ml-1"></i></a>
                    <div class="dropdown-content absolute left-0 mt-2 bg-white rounded shadow-lg hidden group-hover:block z-20 min-w-[120px]">
                        <a href="history.html" class="block px-4 py-2 text-dark hover:bg-neutral">历史沿革</a>
                        <a href="culture.html" class="block px-4 py-2 text-dark hover:bg-neutral">文化特色</a>
                    </div>
                </div>
                <div class="dropdown relative">
                    <a href="about.html"
                        class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">景点推荐 <i
                            class="fa fa-angle-down ml-1"></i></a>
                    <div class="dropdown-content absolute left-0 mt-2 bg-white rounded shadow-lg hidden group-hover:block z-20 min-w-[120px]">
                        <a href="dao.html#spot1" class="block px-4 py-2 text-dark hover:bg-neutral">南澳岛</a>
                        <a href="gy.html#spot2" class="block px-4 py-2 text-dark hover:bg-neutral">小公园</a>
                    </div>
                </div>
                <a href="gallery.html"
                    class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">特色美食</a>
                <a href="contact.html"
                    class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">传统文化</a>
                
            </nav>
            <!-- 移动端菜单按钮 -->
            <div class="caidan md:hidden text-white text-2xl cursor-pointer" id="menu-toggle">
                <i class="fa fa-bars"></i>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <nav class="nav-mobile md:hidden bg-primary px-4 py-2 hidden flex-col gap-2" id="mobile-menu">
            <a href="index.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">首页</a>
            <a href="index.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">家乡介绍</a>
            <a href="history.html" class="block px-4 py-2 text-white hover:bg-neutral">历史沿革</a>
            <a href="culture.html" class="block px-4 py-2 text-white hover:bg-neutral">文化特色</a>
            <a href="about.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">景点推荐</a>
            <a href="dao.html#spot1" class="block px-4 py-2 text-white hover:bg-neutral">南澳岛</a>
            <a href="gy.html#spot2" class="block px-4 py-2 text-white hover:bg-neutral">小公园</a>
            <a href="gallery.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">特色美食</a>
            <a href="contact.html"
                class="text-white font-semibold px-3 py-2 rounded hover:bg-secondary hover:text-dark transition">传统文化</a>
            
        </nav>
    </header>

    <!-- 历史沿革内容 -->
    <section id="history-content" class="py-20 bg-neutral">
        <div class="container mx-auto px-4">
            <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-primary mb-4">汕头历史沿革</h2>
            <div class="w-20 h-1 bg-secondary mb-6"></div>
            <p class="text-lg text-gray-600 mb-4">
                汕头市区古为滨海冲积地。宋时已形成村落，属揭阳县。元代光华埠一带已有较大渔村，称厦岭。
                明初设蓬州守御千户所，嘉靖年间置澄海县时随属澄海。因沙脊向海伸延，百姓设栅捕鱼，称沙汕。
                清康熙年间建沙汕头炮台。雍正年间简称汕头。
            </p>
            <p class="text-lg text-gray-600 mb-4">
                1860 年（咸丰十年）汕头正式开埠，成为近代中国最早对外开放的港口城市之一。
                商贸的繁荣也带动了城市的发展，汕头逐渐成为粤东、闽西南、赣南地区的交通枢纽、进出口岸和商品集散地。
            </p>
            <p class="text-lg text-gray-600 mb-4">
                1921 年，汕头市政厅成立，与澄海分治。1930 年准予设市，隶属广东省政府。
                新中国成立后，汕头于 1950 年 3 月 15 日成立市人民政府。1981 年经国务院批准，在市区龙湖片区试办经济特区。
                1983 年 7 月实行地市合并，建立市领导县的体制。1991 年经济特区区域扩大到整个汕头市区。
            </p>

            <!-- 新增潮汕文化起源部分 -->
            <div class="mt-10 bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-2xl font-bold text-dark mb-4 flex items-center">
                    <i class="fa fa-book-open text-secondary mr-2"></i>潮汕文化起源
                </h3>
                <p class="text-gray-700 mb-3">
                    潮汕文化历史悠久，是中华文化中独具特色的地域文化之一。其起源可追溯至秦汉时期，
                    中原移民与当地土著文化融合，形成了独特的潮汕民系。唐宋时期，随着海上丝绸之路的繁荣，
                    潮汕地区成为重要的商贸口岸，进一步促进了文化的多元发展。
                </p>
                <p class="text-gray-700 mb-3">
                    潮汕文化以潮州方言、潮剧、潮乐、潮汕功夫茶、潮汕菜等为主要代表，具有鲜明的地方特色。
                    其中，潮州方言是古汉语的"活化石"，保留了大量唐宋时期的古音和词汇。
                </p>
                <p class="text-gray-700">
                    明清时期，潮汕地区人才辈出，如明代状元林大钦、清代洋务派代表人物丁日昌等，
                    他们在政治、文化、经济等领域都有着重要的贡献，进一步丰富了潮汕文化的内涵。
                </p>
            </div>

            <!-- 新增重要历史事件时间线 -->
            <div class="mt-10">
                <h3 class="text-2xl font-bold text-dark mb-6 flex items-center">
                    <i class="fa fa-history text-secondary mr-2"></i>重要历史事件
                </h3>
                <div class="relative">
                    <!-- 时间线 -->
                    <div class="absolute left-5 top-0 bottom-0 w-0.5 bg-primary"></div>
                    
                    <!-- 事件1 -->
                    <div class="mb-8 ml-12 relative">
                        <div class="absolute -left-12 w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                            <span class="text-white font-bold">1860</span>
                        </div>
                        <div class="bg-white p-5 rounded-lg shadow-md">
                            <h4 class="text-xl font-bold text-dark mb-2">汕头开埠</h4>
                            <p class="text-gray-700">
                                根据《天津条约》，汕头成为对外通商口岸，正式开埠。开埠后，汕头逐渐发展成为
                                粤东地区的经济中心和对外贸易的重要门户，吸引了大量外国商人和华侨前来经商。
                            </p>
                        </div>
                    </div>
                    
                    <!-- 事件2 -->
                    <div class="mb-8 ml-12 relative">
                        <div class="absolute -left-12 w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                            <span class="text-white font-bold">1921</span>
                        </div>
                        <div class="bg-white p-5 rounded-lg shadow-md">
                            <h4 class="text-xl font-bold text-dark mb-2">汕头设市</h4>
                            <p class="text-gray-700">
                                汕头市政厅成立，脱离澄海县管辖，成为独立的行政单位。这标志着汕头城市建设的开始，
                                城市规模逐渐扩大，基础设施不断完善。
                            </p>
                        </div>
                    </div>
                    
                    <!-- 事件3 -->
                    <div class="mb-8 ml-12 relative">
                        <div class="absolute -left-12 w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                            <span class="text-white font-bold">1939</span>
                        </div>
                        <div class="bg-white p-5 rounded-lg shadow-md">
                            <h4 class="text-xl font-bold text-dark mb-2">汕头沦陷</h4>
                            <p class="text-gray-700">
                                抗日战争期间，汕头被日本侵略军占领，成为沦陷区。在沦陷期间，汕头人民进行了顽强的抵抗，
                                展现了不屈的民族精神。
                            </p>
                        </div>
                    </div>
                    
                    <!-- 事件4 -->
                    <div class="mb-8 ml-12 relative">
                        <div class="absolute -left-12 w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                            <span class="text-white font-bold">1981</span>
                        </div>
                        <div class="bg-white p-5 rounded-lg shadow-md">
                            <h4 class="text-xl font-bold text-dark mb-2">经济特区设立</h4>
                            <p class="text-gray-700">
                                国务院批准在汕头市龙湖片区设立经济特区，面积1.67平方公里。这是中国最早设立的经济特区之一，
                                为汕头的经济发展注入了强大动力。
                            </p>
                        </div>
                    </div>
                    
                    <!-- 事件5 -->
                    <div class="ml-12 relative">
                        <div class="absolute -left-12 w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                            <span class="text-white font-bold">2021</span>
                        </div>
                        <div class="bg-white p-5 rounded-lg shadow-md">
                            <h4 class="text-xl font-bold text-dark mb-2">汕头经济特区扩围</h4>
                            <p class="text-gray-700">
                                汕头经济特区范围扩大到全市，面积达到2199平方公里。这一举措进一步提升了汕头在粤港澳大湾区中的地位，
                                为汕头的高质量发展带来了新的机遇。
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 新增现代发展部分 -->
            <div class="mt-10 bg-white p-6 rounded-lg shadow-md">
                <h3 class="text-2xl font-bold text-dark mb-4 flex items-center">
                    <i class="fa fa-building text-secondary mr-2"></i>现代发展
                </h3>
                <p class="text-gray-700 mb-3">
                    改革开放以来，汕头经济快速发展，已形成了以制造业、商贸业、旅游业为主导的产业结构。
                    作为经济特区和沿海开放城市，汕头吸引了大量国内外投资，培育了一批知名企业和品牌。
                </p>
                <div class="grid md:grid-cols-2 gap-6 mt-6">
                    <div class="bg-neutral p-4 rounded-lg">
                        <h4 class="text-xl font-semibold text-primary mb-2">产业发展</h4>
                        <p class="text-gray-700">
                            汕头是中国重要的制造业基地之一，主要产业包括电子信息、纺织服装、化工塑料、机械装备等。
                            同时，汕头也是中国重要的玩具生产和出口基地，被誉为"中国玩具之都"。
                        </p>
                    </div>
                    <div class="bg-neutral p-4 rounded-lg">
                        <h4 class="text-xl font-semibold text-primary mb-2">文化传承</h4>
                        <p class="text-gray-700">
                            近年来，汕头加大了对传统文化的保护和传承力度，潮剧、潮乐等非物质文化遗产得到了更好的保护和发展。
                            同时，汕头还积极推动文化创新，打造了一批具有地方特色的文化品牌。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer bg-dark text-white py-6 mt-10">
        <div class="container mx-auto text-center">
            <p>&copy; 2025 我的家乡. 保留所有权利.</p>
        </div>
    </footer>

    <!-- 移动端菜单脚本 -->
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            const menuToggle = document.getElementById('menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            menuToggle.addEventListener('click', function () {
                mobileMenu.classList.toggle('hidden');
            });

            // 下拉菜单显示
            document.querySelectorAll('.dropdown').forEach(function (drop) {
                drop.addEventListener('mouseenter', function () {
                    const content = drop.querySelector('.dropdown-content');
                    if (content) content.classList.remove('hidden');
                });
                drop.addEventListener('mouseleave', function () {
                    const content = drop.querySelector('.dropdown-content');
                    if (content) content.classList.add('hidden');
                });
            });
        });
    </script>
</body>

</html>